<template>
  <el-dialog
    title="提示"
    :visible.sync="addShopTypeVisable"
    width="50%"
    >
      <el-form :model="shopType" ref="form">
        <el-form-item
          label="类型名"
          label-width="100px"
          prop="title"
          :rules="[
            { required: true, message: '请输入类型名称', trigger: 'blur' }
          ]"
        >
          <el-input type="text" maxlength="5" v-model.trim="shopType.title"/>
        </el-form-item>
        <el-form-item label="分类类型" label-width="100px"  prop="type">
          <el-select v-model="shopType.type" placeholder="分类类型" :disabled="parent">
            <el-option :label="item" :value="index + 1" :key="index + 1" v-for="(item, index) of typeList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="logo"
          label-width="100px"
          prop="logo"
          :rules="[
            { required: true, message: '请上传图片' }
          ]">
            <el-upload
              class="avatar-uploader"
              :action="`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/img/upload`"
              name="files"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="shopType.logo" :src="shopType.logo" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addShopTypeVisable = false">取 消</el-button>
        <el-button type="primary" @click="addShopType">确 定</el-button>
      </div>
    </el-dialog>
</template>

<script>
export default {
  name: 'ShopType',
  data () {
    return {
      process,
      title: '',
      imageUrl: '',
      addShopTypeVisable: false,
      shopType: {
        title: '',
        logo: '',
        type: 1
      },
      typeList: ['店铺', '服务']
    }
  },
  props: {
    parent: {
      type: Object,
      default: null,
      required: false
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.shopType.logo = URL.createObjectURL(file.raw)
      this.shopType.logo = `http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/${res.body.name}`
      // 'http://localhost:9009/' + res.body.name
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    addShopType () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.$http.post(`http://${process.env.NODE_ENV === 'development' ? 'localhost:9009' : 'qiucc.com'}/rentmall/shopType/add`, {
          form: {
            parentId: this.$props.parent ? this.$props.parent.id : 0,
            title: this.shopType.title,
            logo: this.shopType.logo,
            type: this.shopType.type
          }
        }).then(res => {
          if (res.body.code === 200) this.$message.success('创建成功')
          else this.$message.error(res.body.message)
          this.addShopTypeVisable = false
          this.$emit('close')
        })
      })
    },
    show () {
      this.shopType.logo = null
      this.shopType.title = ''
      this.addShopTypeVisable = true
      debugger
      if (!this.parent || !this.parent.type) {
        this.shopType.type = 1
      } else {
        this.shopType.type = this.parent.type
      }
    }
  }
}
</script>

<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
